<template>
  <div>
    <transition name="alpha">
      <div
        style="width: 100%;height: 100vh; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:10; background-color:#000000;position: fixed;bottom: 0;"
        v-if="visible"></div>
    </transition>
    <transition name="pop">
      <div class="container" v-if="visible">
        <div class="title">
          <div style="display: flex;flex-direction: row;background: white;z-index: 102">
            <img :src="IconClose" style="width: 18px;height:18px;padding: 15px;"
                 v-on:click="onCloseClick"/>
            <span
              style="flex: 1;text-align: center;margin: auto;display: inline-block;position: relative;left: -22px;color: #42578E;font-size: 18px;top: .5px">到期后安排</span>
          </div>
        </div>
        <div style="overflow: scroll;display: flex;flex-direction: column;">
          <div style="margin-top: 45px;z-index: 10">
            <div v-for="plan,index in planList" v-bind:key="index" class="plan" v-on:click="onPlanSelected(plan)">
              <span style="color: #42578E;font-size: 18px;">{{plan.name}}</span>
              <span style="color: #97989C;font-size: 13px;">{{plan.description}}</span>
              <span style="color: #97989C;font-size: 13px;" v-if="plan.prompt !== undefined">{{plan.prompt}}</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import IconClose from '@/assets/icon/icon_close.png'

  export default {
    name: 'HelloWorld',
    props: ['selectedPlan', 'visible'],
    data () {
      return {
        IconClose: IconClose,
        planList: [
          {name: '到期滚存', description: '2019年02月09日到期后本金及收益全部再定存3个月', id: '01'},
          {name: '取出到微众卡', description: '2019年02月09日到期后本金及收益全部取出到微众卡', id: '02'},
          {
            name: '取出到活期+',
            description: '2019年02月09日到期后本金及收益全部取出到活期＋',
            prompt: '根据监管的相关规定，活期+实时转出的单日最高限额为10,000元，请提前做好资金安排。',
            id: '03'
          }
        ]
      }
    },
    created () {
    },
    methods: {
      onCloseClick: function () {
        this.onPlanSelected(this.selectedPlan)
      },
      onPlanSelected: function (plan) {
        this.$emit('onPlanSelected', plan)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 11;
  }

  .title::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    /*background: red;*/
    position: relative;
    left: 0px;
  }

  .plan {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    text-align: center
  }

  .plan::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    /*background: red;*/
    position: relative;
    left: 0px;
    top: 5px;
  }

  .container {
    z-index: 100;
    width: 100%;
    height: 75vh;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0vh;
    background: white;
    filter: alpha(Opacity=100);
    -moz-opacity: 1;
    opacity: 1;
  }

  .pop-enter {
    bottom: -70vh;
  }

  .pop-enter-to {
    bottom: 0;
  }

  .pop-enter-active, .pop-leave-active {
    transition: bottom .4s;
    transition-timing-function: ease;
  }

  .pop-leave {
    bottom: 0vh;
  }

  .pop-leave-to {
    bottom: -70vh;
  }

  .alpha-enter {
    opacity: .1
  }

  .alpha-enter-to {
    opacity: 1
  }

  .alpha-enter-active {
    transition: opacity .9s;
    transition-timing-function: ease;
  }

</style>
